import { createApp, h, inject } from "vue";

import App from "./App.vue";

import {
  createWebHashHistory,
  createMemoryHistory,
  createRouter,
  createWebHistory,
} from "vue-router";

import User from "./views/User.vue";
import Home from "./views/Home.vue";
import Login from "./views/Login.vue";
import Shop from "./views/Shop.vue";
import Body from "./views/Body.vue";
import Header from "./views/Header.vue";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/home",
      component: Home,
    },
    {
      path: "/shop",
      component: Shop,
    },
    {
      path: "/user",
      component: User,
    },
    {
      path: "/login",
      name: "login",
      component: Login,
    },
  ],
});

router.beforeEach((to, from) => {
  // to,from route
  const title = inject("title");
  console.log("beforeEach", `from:${from.fullPath},to:${to.fullPath}`, title);
  // if (to.fullPath === "/user") {
  // return false; //拦截
  // return { name: "login" };
  // return { path: "/login" };
  // return "/login";
  // throw new Error("login error");
  // }
});
router.beforeResolve((to, from) => {
  const title = inject("title");
  console.log(
    "beforeResolve",
    `from:${from.fullPath},to:${to.fullPath}`,
    title
  );
});

router.afterEach((to, from) => {
  console.log("afterEach", `from:${from.fullPath},to:${to.fullPath}`);
  document.title = "hello afterEach";
});
// 捕捉错误
router.onError((err) => {
  console.log(err.message);
});

const app = createApp({ render: () => h(App) });
app.provide("title", "hello world");
app.use(router);

app.mount("#app");
